<template>
  <div class="app-container thesis-home">
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">论文首页（高竞鸿）</h1>
        <p class="page-subtitle">个人信息与毕业论文成果展示</p>
      </div>
      <div class="header-actions">
        <el-button type="primary" size="medium" @click="refreshData" :loading="loading">
          <i class="el-icon-refresh"></i> 刷新数据
        </el-button>
        <el-button type="success" size="medium" @click="exportReport" :disabled="!canExport">
          <i class="el-icon-download"></i> 导出报告
        </el-button>
      </div>
    </div>

    <!-- 用户个人信息板块 -->
    <el-card class="module-card user-info-card">
      <div slot="header" class="card-header">
        <span><i class="el-icon-user"></i> 用户个人信息</span>
        <el-button type="text" size="small" @click="editUserInfo">
          <i class="el-icon-edit"></i> 编辑
        </el-button>
      </div>
      <div class="user-info-content">
        <div class="avatar-section">
          <el-popover placement="top" title="更换头像" trigger="click">
            <div class="avatar-upload">
              <el-upload
                class="avatar-uploader"
                action="#"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :auto-upload="false"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
              </el-upload>
            </div>
            <div slot="reference">
              <el-avatar :size="120" :src="userInfo.avatar" icon="el-icon-user-solid"></el-avatar>
            </div>
          </el-popover>
          <h3>{{ userInfo.name }}</h3>
          <p>{{ userInfo.studentId }}</p>
        </div>
        <div class="info-section">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="学号">{{ userInfo.studentId }}</el-descriptions-item>
            <el-descriptions-item label="班级">{{ userInfo.className }}</el-descriptions-item>
            <el-descriptions-item label="专业">{{ userInfo.major }}</el-descriptions-item>
            <el-descriptions-item label="联系方式">{{ userInfo.contact }}</el-descriptions-item>
            <el-descriptions-item label="邮箱">{{ userInfo.email }}</el-descriptions-item>
            <el-descriptions-item label="入学年份">{{ userInfo.enrollmentYear }}</el-descriptions-item>
            <el-descriptions-item label="指导老师" :span="2">{{ userInfo.advisor }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </el-card>

    <!-- 毕业论文基本信息展示区 -->
    <el-card class="module-card thesis-basic-card">
      <div slot="header" class="card-header">
        <span><i class="el-icon-document"></i> 毕业论文基本信息</span>
        <el-tag :type="thesisStatus.type" class="status-tag">{{ thesisStatus.text }}</el-tag>
      </div>
      <div class="thesis-basic-info">
        <div class="thesis-title-section">
          <h3 class="thesis-title">{{ thesisBasicInfo.title }}</h3>
          <div class="thesis-meta">
            <el-tag v-for="tag in thesisBasicInfo.keywords" :key="tag" size="small" effect="plain">{{ tag }}</el-tag>
          </div>
        </div>
        
        <el-descriptions :column="3" border class="thesis-desc">
          <el-descriptions-item label="论文类型">{{ thesisBasicInfo.type }}</el-descriptions-item>
          <el-descriptions-item label="研究方向">{{ thesisBasicInfo.researchDirection }}</el-descriptions-item>
          <el-descriptions-item label="提交日期">{{ thesisBasicInfo.submitDate }}</el-descriptions-item>
          <el-descriptions-item label="答辩日期">{{ thesisBasicInfo.defenseDate }}</el-descriptions-item>
          <el-descriptions-item label="论文成绩">
            <el-rate v-model="scoreValue" disabled show-score :max="100"></el-rate>
          </el-descriptions-item>
          <el-descriptions-item label="是否通过">
            <el-tag :type="thesisBasicInfo.pass ? 'success' : 'danger'">
              {{ thesisBasicInfo.pass ? '是' : '否' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="归档状态" :span="2">
            <el-tag :type="thesisBasicInfo.archived ? 'success' : 'warning'">
              {{ thesisBasicInfo.archived ? '已归档' : '未归档' }}
            </el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>

    <!-- 毕业论文成果详细介绍模板 -->
    <el-card class="module-card thesis-detail-card">
      <div slot="header" class="card-header">
        <span><i class="el-icon-s-data"></i> 毕业论文成果详细介绍</span>
      </div>
      <div class="thesis-detail-info">
        <el-tabs v-model="activeTab" type="card">
          <el-tab-pane label="研究内容" name="content">
            <div class="tab-content">
              <div class="content-section">
                <h4>研究背景</h4>
                <p>{{ thesisDetailInfo.background }}</p>
              </div>
              <div class="content-section">
                <h4>研究内容</h4>
                <p>{{ thesisDetailInfo.researchContent }}</p>
              </div>
              <div class="content-section">
                <h4>研究目标</h4>
                <p>{{ thesisDetailInfo.objectives }}</p>
              </div>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="研究方法" name="method">
            <div class="tab-content">
              <ul class="method-list">
                <li v-for="(method, index) in thesisDetailInfo.methods" :key="index">
                  <div class="method-item">
                    <div class="method-number">{{ index + 1 }}</div>
                    <div class="method-content">
                      <h5>{{ method.title }}</h5>
                      <p>{{ method.description }}</p>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="创新点" name="innovation">
            <div class="tab-content">
              <div class="innovation-list">
                <div v-for="(item, index) in thesisDetailInfo.innovations" :key="index" class="innovation-item">
                  <div class="innovation-icon">{{ index + 1 }}</div>
                  <div class="innovation-content">
                    <h5>创新点 {{ index + 1 }}</h5>
                    <p>{{ item }}</p>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="成果展示" name="achievements">
            <div class="tab-content">
              <el-timeline>
                <el-timeline-item 
                  v-for="(item, index) in thesisDetailInfo.achievements" 
                  :key="index"
                  :timestamp="item.date"
                  :type="getAchievementType(index)"
                  :icon="getAchievementIcon(index)"
                >
                  <h4>{{ item.title }}</h4>
                  <p>{{ item.description }}</p>
                  <div v-if="item.files && item.files.length > 0" class="achievement-files">
                    <el-tag 
                      v-for="file in item.files" 
                      :key="file.name" 
                      size="small" 
                      type="info"
                      @click="downloadFile(file)"
                      class="file-tag"
                    >
                      <i class="el-icon-document"></i> {{ file.name }}
                    </el-tag>
                  </div>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="导师评价" name="evaluation">
            <div class="tab-content">
              <div class="evaluation-section">
                <div class="evaluator-info">
                  <el-avatar :size="60" :src="advisorInfo.avatar" icon="el-icon-user"></el-avatar>
                  <div class="evaluator-details">
                    <strong>{{ advisorInfo.name }}</strong>
                    <p>{{ advisorInfo.title }} | {{ advisorInfo.department }}</p>
                  </div>
                </div>
                <div class="evaluation-content">
                  <p>{{ thesisDetailInfo.evaluation.content }}</p>
                  <div class="evaluation-score">
                    <strong>综合评分：</strong>
                    <el-rate v-model="evaluationScore" disabled show-score :max="100"></el-rate>
                  </div>
                  <div class="evaluation-date">评价日期：{{ thesisDetailInfo.evaluation.date }}</div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
        
        <div class="file-section">
          <h3>相关文件</h3>
          <el-upload
            class="upload-demo"
            drag
            action="#"
            :auto-upload="false"
            :on-change="handleFileChange"
            :file-list="fileList"
            multiple
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">拖拽文件到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传 PDF/DOC/DOCX 文件，单个文件不超过10MB</div>
          </el-upload>
          
          <div v-if="fileList.length > 0" class="file-list-section">
            <h4>已上传文件</h4>
            <el-table :data="fileList" style="width: 100%">
              <el-table-column prop="name" label="文件名" width="300"></el-table-column>
              <el-table-column prop="size" label="文件大小" width="120">
                <template slot-scope="scope">
                  {{ formatFileSize(scope.row.size) }}
                </template>
              </el-table-column>
              <el-table-column prop="uploadTime" label="上传时间" width="180"></el-table-column>
              <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" @click="downloadFile(scope.row)">
                    <i class="el-icon-download"></i> 下载
                  </el-button>
                  <el-button size="mini" type="text" @click="deleteFile(scope.$index)">
                    <i class="el-icon-delete"></i> 删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ThesisHome',
  data() {
    return {
      loading: false,
      canExport: true,
      activeTab: 'content',
      scoreValue: 85,
      evaluationScore: 88,
      userInfo: {
        name: '高竞鸿',
        studentId: '2021010101',
        className: '计算机科学与技术1班',
        major: '计算机科学与技术',
        contact: '13800138000',
        email: 'gaojinghong@example.com',
        advisor: '张教授',
        enrollmentYear: '2021年9月',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
      },
      thesisBasicInfo: {
        title: '基于深度学习的智能推荐系统设计与实现',
        type: '应用研究',
        researchDirection: '人工智能与数据挖掘',
        submitDate: '2025-05-15',
        defenseDate: '2025-05-25',
        pass: true,
        archived: true,
        keywords: ['深度学习', '推荐系统', '协同过滤', '神经网络']
      },
      thesisDetailInfo: {
        background: '随着互联网的快速发展，信息过载问题日益严重。推荐系统作为解决信息过载问题的有效工具，在电子商务、社交媒体、新闻推荐等领域得到了广泛应用。传统的推荐算法如协同过滤和基于内容的推荐存在冷启动、数据稀疏等问题。深度学习技术的兴起为推荐系统带来了新的机遇，通过深度神经网络可以更好地捕捉用户和物品的复杂特征，提高推荐精度。',
        researchContent: '本研究主要围绕基于深度学习的推荐系统展开，包括以下几个方面：1）研究深度学习在推荐系统中的应用现状和发展趋势；2）设计一种融合多种深度学习模型的混合推荐框架；3）针对推荐系统中的冷启动和数据稀疏问题，提出相应的解决方案；4）通过实验验证所提出方法的有效性和可行性。',
        objectives: '本研究的主要目标是设计并实现一个基于深度学习的智能推荐系统，解决传统推荐算法中存在的冷启动和数据稀疏问题，提高推荐的准确性和个性化程度。具体目标包括：1）构建一个能够处理大规模数据的深度学习推荐模型；2）设计一种有效的特征表示方法，提高用户和物品特征的表达能力；3）实现一个可扩展的推荐系统原型，并进行实验验证。',
        methods: [
          {
            title: '深度神经网络模型',
            description: '采用多层感知机(MLP)和卷积神经网络(CNN)构建深度推荐模型，通过非线性变换捕捉用户和物品之间的复杂关系。'
          },
          {
            title: '注意力机制',
            description: '引入注意力机制，使模型能够关注用户历史行为中的重要部分，提高推荐的准确性。'
          },
          {
            title: '多任务学习',
            description: '通过多任务学习框架，同时优化多个推荐任务，提高模型的泛化能力和鲁棒性。'
          },
          {
            title: '知识图谱融合',
            description: '将知识图谱与深度学习模型相结合，利用外部知识增强推荐系统的解释性和准确性。'
          }
        ],
        innovations: [
          '提出了一种融合多种深度学习模型的混合推荐框架，有效结合了不同模型的优点，提高了推荐精度。',
          '设计了一种基于注意力机制的特征交互方法，能够自动捕捉用户和物品之间的关键交互特征。',
          '针对冷启动问题，提出了一种基于迁移学习的解决方案，利用跨域知识缓解新用户和新物品的数据稀疏问题。',
          '开发了一种可解释的推荐算法，通过可视化技术展示推荐结果的形成过程，提高用户对推荐系统的信任度。'
        ],
        achievements: [
          {
            date: '2024-12-10',
            title: '完成深度学习推荐模型设计',
            description: '成功设计并实现了基于深度神经网络的推荐模型，在公开数据集上取得了优于传统方法的推荐效果。',
            files: [
              { name: '模型设计文档.pdf', url: '#' },
              { name: '实验数据.xlsx', url: '#' }
            ]
          },
          {
            date: '2025-01-15',
            title: '发表学术论文一篇',
            description: '在国际期刊《Expert Systems with Applications》发表题为"Deep Learning-based Recommender System: A Survey"的综述论文。',
            files: [
              { name: '论文PDF.pdf', url: '#' }
            ]
          },
          {
            date: '2025-02-20',
            title: '申请软件著作权一项',
            description: '申请了"基于深度学习的智能推荐系统V1.0"软件著作权，已获得受理通知。',
            files: [
              { name: '软件著作权申请表.pdf', url: '#' }
            ]
          },
          {
            date: '2025-03-25',
            title: '完成系统原型开发',
            description: '完成了推荐系统的原型开发，实现了用户注册、登录、物品浏览、推荐展示等基本功能。',
            files: [
              { name: '系统演示视频.mp4', url: '#' },
              { name: '系统使用手册.docx', url: '#' }
            ]
          }
        ],
        evaluation: {
          content: '该论文选题具有较强的理论意义和实际应用价值，研究内容充实，研究方法科学合理。作者对深度学习和推荐系统领域有较深入的理解，能够独立完成研究工作。论文结构清晰，逻辑严密，实验设计合理，结果分析到位。论文提出的混合推荐框架和针对冷启动问题的解决方案具有一定的创新性。总体而言，这是一篇优秀的学士学位论文，达到了学士学位论文的要求。',
          date: '2025-05-26'
        }
      },
      advisorInfo: {
        name: '张教授',
        title: '教授',
        department: '计算机科学与技术学院',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
      },
      fileList: [
        {
          name: '毕业论文最终版.pdf',
          size: 5242880,
          uploadTime: '2025-05-15 10:30:00',
          url: '#'
        },
        {
          name: '答辩PPT.pptx',
          size: 10485760,
          uploadTime: '2025-05-20 14:20:00',
          url: '#'
        }
      ]
    }
  },
  computed: {
    thesisStatus() {
      if (!this.thesisBasicInfo.pass) {
        return { type: 'danger', text: '未通过' }
      } else if (!this.thesisBasicInfo.archived) {
        return { type: 'warning', text: '已通过，待归档' }
      } else {
        return { type: 'success', text: '已归档' }
      }
    }
  },
  methods: {
    refreshData() {
      this.loading = true
      // 模拟数据刷新
      setTimeout(() => {
        this.loading = false
        this.$message.success('数据刷新成功')
      }, 1000)
    },
    exportReport() {
      this.$message.success('报告导出成功')
    },
    editUserInfo() {
      this.$message.info('编辑功能开发中')
    },
    handleAvatarSuccess(res, file) {
      this.userInfo.avatar = URL.createObjectURL(file.raw)
      this.$message.success('头像上传成功')
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    handleFileChange(file, fileList) {
      this.fileList = fileList
    },
    downloadFile(file) {
      this.$message.success(`正在下载文件: ${file.name}`)
    },
    deleteFile(index) {
      this.fileList.splice(index, 1)
      this.$message.success('文件删除成功')
    },
    formatFileSize(bytes) {
      if (bytes === 0) return '0 B'
      const k = 1024
      const sizes = ['B', 'KB', 'MB', 'GB']
      const i = Math.floor(Math.log(bytes) / Math.log(k))
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
    },
    getAchievementType(index) {
      const types = ['primary', 'success', 'warning', 'danger', 'info']
      return types[index % types.length]
    },
    getAchievementIcon(index) {
      const icons = ['el-icon-s-opportunity', 'el-icon-document', 'el-icon-medal', 'el-icon-trophy', 'el-icon-star-on']
      return icons[index % icons.length]
    }
  }
}
</script>

<style lang="scss" scoped>
.thesis-home {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 84px);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
  background: linear-gradient(135deg, #409EFF, #36A3F7);
  color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  .header-content {
    .page-title {
      margin: 0 0 10px 0;
      font-size: 28px;
      font-weight: 600;
    }

    .page-subtitle {
      margin: 0;
      font-size: 16px;
      opacity: 0.9;
    }
  }

  .header-actions {
    .el-button {
      background-color: rgba(255, 255, 255, 0.2);
      border-color: rgba(255, 255, 255, 0.3);
      color: white;

      &:hover {
        background-color: rgba(255, 255, 255, 0.3);
        border-color: rgba(255, 255, 255, 0.5);
      }
    }
  }
}

.module-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 16px;

    i {
      margin-right: 8px;
      color: #409EFF;
    }
  }
}

.user-info-card {
  .user-info-content {
    display: flex;
    gap: 30px;

    .avatar-section {
      text-align: center;
      flex-shrink: 0;

      h3 {
        margin: 15px 0 5px;
        font-size: 18px;
      }

      p {
        margin: 0;
        color: #909399;
        font-size: 14px;
      }
    }

    .info-section {
      flex: 1;
    }
  }
}

.thesis-basic-card {
  .thesis-basic-info {
    .thesis-title-section {
      margin-bottom: 20px;
      text-align: center;

      .thesis-title {
        margin: 0 0 10px;
        font-size: 22px;
        color: #303133;
      }

      .thesis-meta {
        .el-tag {
          margin: 0 5px;
        }
      }
    }

    .thesis-desc {
      .el-rate {
        display: inline-block;
      }
    }
  }
}

.thesis-detail-card {
  .tab-content {
    padding: 20px 0;

    .content-section {
      margin-bottom: 20px;

      h4 {
        margin: 0 0 10px;
        color: #409EFF;
        font-size: 16px;
      }

      p {
        margin: 0;
        line-height: 1.6;
        color: #606266;
      }
    }

    .method-list {
      list-style: none;
      padding: 0;

      .method-item {
        display: flex;
        margin-bottom: 20px;
        padding: 15px;
        background-color: #f9f9f9;
        border-radius: 6px;

        .method-number {
          width: 30px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          background-color: #409EFF;
          color: white;
          border-radius: 50%;
          margin-right: 15px;
          flex-shrink: 0;
        }

        .method-content {
          flex: 1;

          h5 {
            margin: 0 0 8px;
            color: #303133;
          }

          p {
            margin: 0;
            line-height: 1.6;
            color: #606266;
          }
        }
      }
    }

    .innovation-list {
      .innovation-item {
        display: flex;
        margin-bottom: 20px;
        padding: 15px;
        background-color: #f0f9ff;
        border-radius: 6px;
        border-left: 4px solid #409EFF;

        .innovation-icon {
          width: 30px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          background-color: #409EFF;
          color: white;
          border-radius: 50%;
          margin-right: 15px;
          flex-shrink: 0;
        }

        .innovation-content {
          flex: 1;

          h5 {
            margin: 0 0 8px;
            color: #303133;
          }

          p {
            margin: 0;
            line-height: 1.6;
            color: #606266;
          }
        }
      }
    }

    .evaluation-section {
      .evaluator-info {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        padding: 15px;
        background-color: #f9f9f9;
        border-radius: 6px;

        .evaluator-details {
          margin-left: 15px;

          strong {
            display: block;
            margin-bottom: 5px;
            font-size: 16px;
          }

          p {
            margin: 0;
            color: #909399;
          }
        }
      }

      .evaluation-content {
        padding: 15px;
        background-color: #f9f9f9;
        border-radius: 6px;

        p {
          margin: 0 0 15px;
          line-height: 1.6;
        }

        .evaluation-score {
          margin-bottom: 10px;
        }

        .evaluation-date {
          text-align: right;
          color: #909399;
          font-size: 14px;
        }
      }
    }
  }

  .file-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #ebeef5;

    h3 {
      margin: 0 0 15px;
      color: #303133;
    }

    .file-list-section {
      margin-top: 20px;

      h4 {
        margin: 0 0 10px;
        color: #606266;
      }

      .file-tag {
        margin-right: 10px;
        cursor: pointer;

        &:hover {
          background-color: #ecf5ff;
        }
      }
    }
  }
}

.avatar-upload {
  text-align: center;
  padding: 10px;
}

@media (max-width: 768px) {
  .thesis-home {
    padding: 10px;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;

    .header-actions {
      align-self: stretch;
      display: flex;
      justify-content: flex-end;
    }
  }

  .user-info-content {
    flex-direction: column;
    gap: 20px;
  }

  .thesis-title-section {
    .thesis-title {
      font-size: 18px !important;
    }
  }
}
</style>